<!-- eslint-disable vue/no-deprecated-v-on-native-modifier -->
<template>
  <div class="layout">
    <div class="banner">
      <div class="header">
        <div class="logo">
          <img src="@/assets/img/logo.png" alt="">
        </div>
        <div class="nav">
          <el-menu
            active-text-color="#08ade6"
            :default-active="$route.path"
            router
            mode="horizontal"
          >
            <el-menu-item index="/home">Home</el-menu-item>
            <el-menu-item index="/ticket">Ticket</el-menu-item>
            <el-menu-item index="/hotel">Hotel</el-menu-item>
            <el-menu-item index="/tour">Tour</el-menu-item>
            <el-menu-item index="/blog">Blog</el-menu-item>
          </el-menu>
        </div>
        <div class="search">
          <el-input
            v-model="keyword"
            placeholder="Destination, attration, hotel"
            :prefix-icon="Search"
            @keyup.enter.native="goSearch"
          />
        </div>
        <div class="user">
          <el-dropdown split-button type="primary">
            <span @click="goToUserCenter">User Center</span>            
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="login('User 01','pwd01')">User 01</el-dropdown-item>
                <el-dropdown-item @click="login('User 02','pwd02')">User 02</el-dropdown-item>
                <el-dropdown-item @click="login('User 03','pwd03')">User 03</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="main">
      <RouterView/>
      <!-- back to top -->
      <el-backtop :right="200" :bottom="100"/>
    </div>
  </div>
</template>
<script setup>
import router from '@/router';
import { useUserStore } from "@/stores/user";
import request from "@/utils/request";
import { Search } from "@element-plus/icons-vue";
import { ref, watch } from "vue";

let currentUser = ref();

let loginForm = ref({
  username:'',
  password:''
})


const userStore = useUserStore()

async function login(uname, pwd){
  currentUser.value = uname;
  // switch users by assigning different value to loginForm
  loginForm.value = {
    username:uname,
    password:pwd
  }
  const resUserId = await request.post("/user/login",loginForm.value)
  const userId = resUserId.data.data
  userStore.setUserId(userId)
  const resUser = await request.get("/user")
  const user = resUser.data.data
  userStore.setUser(user)
  router.go(0); // refresh
}


watch(() => userStore.userId, async (newUserId, oldUserId) => {
  if (newUserId !== oldUserId) {
    userStore.setUserId(newUserId)
    const resUser = await request.get("/user")
    const user = resUser.data.data
    userStore.setUser(user)
    router.go(0); // refresh
  }
});

function goToUserCenter(){
  router.push('/user')
}

let keyword = ref()
function goSearch(){  
  userStore.setKeyword(keyword.value)
  router.push(`/search/${keyword.value.trim()}`)
}


</script>
<style lang="less" scoped>
.banner {
  width: 100%;
  height: 75px;
  line-height: 75px;
  background-color: #fff;
  box-shadow: 0 1px 3px #90d6f5;

  .header {
    margin: 0 auto;
    display: flex;
    width: 90%;
    text-align: center;
  
    .logo {
      position: relative;
      width: 15%;

      img {
        position: absolute;
        top: -18%;
        left: 0;
        height: 80px;
        object-fit: contain;
      }
    }
  
    .nav {
      width: 45%;
      margin-left: 50px;
     
      .el-menu {
        height: 76px;
        
        .el-menu-item {
          color: skyblue;
          font-size: 25px;
          font-weight: 700;
        }  
      }
    }
  
    .search {
      padding: 0 10px;
      width: 20%;
      
    }
  
    .user {
      width: 10%;

      .el-dropdown {
        margin-top: 23px;
      }
    }
  }
}
</style>
